<template>
<DividerHeader/>
<div class="container">
    <input type="file" @change="handleUpload" accept="image/*">

    <div class="image-container">
        <div class="image-box">
            <h3>待处理的图像</h3>
            <img :src="originalImage" v-if="originalImage">
        </div>
        
        <div class="image-box">
            <h3>处理后的图像</h3>
            <img :src="processedImage" v-if="processedImage">
        </div>
        </div>
        
        <div class="operations">
        <button @click="applyOperation('gray')">灰度化</button>
        <button @click="applyOperation('threshold')">二值化</button>
        <button @click="applyOperation('flip')">翻转照片</button>

        <button @click="applyOperation('left')">左转45度</button>
        <button @click="applyOperation('right')">右转45度</button>
        <button @click="applyOperation('rotate')">旋转照片（右）</button>
        <button @click="applyOperation('腐蚀')">腐蚀</button>
        <button @click="applyOperation('膨胀')">膨胀</button>
        <button @click="applyOperation('方盒滤波')">方盒滤波</button>
        <button @click="applyOperation('均值滤波')">均值滤波</button>
        <button @click="applyOperation('高斯滤波')">高斯滤波</button>
        <button @click="applyOperation('中值滤波')">中值滤波</button>
        <button >未完待续</button>

        <!-- 添加其他操作按钮 -->
        </div>
    
    <button @click="exportImage">Export</button>
</div>

</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import axios from 'axios'
import DividerHeader from './header/test.vue'
// 全局照片记录变量
let currentFilename = '';

export default defineComponent({
  components: { DividerHeader },
setup() {
    const originalImage = ref('')
    const processedImage = ref('')
    // 上传文件时保存返回的文件名
   

    // 点击选择文件之后之间将其传给后端
    const handleUpload = async (e: Event) => {
         // 1. 从事件对象中提取文件输入框元素
        const inputElement = e.target as HTMLInputElement;
        
        // 2. 获取用户选择的文件
        const file = inputElement.files?.[0];
        if (!file) return; // 未选择文件时退出

        // 添加前端本地预览，直接在本地展示
        const reader = new FileReader()
        reader.onload = (e) => {
            originalImage.value = e.target?.result as string
        }
        reader.readAsDataURL(file)

        // 后续保持原有上传逻辑
        const formData = new FormData() // 创建一个用于通过 HTTP 发送表单数据的容器，专门用于处理包含文件上传的请求
        const newFilename = `test.png`  // 传过去的文件名
        formData.append('file', file, newFilename)

        try {
            const response = await axios.post('http://localhost:8003/upload', formData, {
            headers: {
            'Content-Type': 'multipart/form-data'
            }})
           console.log(response.data.original) // 提取文件名
           currentFilename = response.data.original
        } 
        catch (error) {
            console.error('Upload failed:', error)
        }
    }

    // 判断传入的参数，给后端传递，判断是哪一个操作
    const applyOperation = async (operation: string) => {
        const formData = new FormData();
        formData.append('operation', operation); 
        formData.append('filename', currentFilename); 
        // processedImage.value = `http://localhost:8003/uploads/processed.jpg`
        try {
            const response = await axios.post(`http://localhost:8003/process`, formData, {
                headers: {
                    // 类型是表单类型的
                'Content-Type': 'multipart/form-data'
            }})
            currentFilename = response.data.processed;
            console.log('当前新的路径',response.data.processed)
            processedImage.value = `http://localhost:8003/uploads/${response.data.processed}`
        } 
        catch (error) {
            console.error('Processing failed:', error)
        }
    }

    const exportImage = () => {
    if (!processedImage.value) return
    // 实现导出逻辑
    }

    // 把数据导出给模板
    return { handleUpload, applyOperation, exportImage, originalImage, processedImage }
}
})
</script>

<style>
:root {
  --primary-color: #4a90e2;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --background-color: #f8f9fa;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body {
  background-color: var(--background-color);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 2rem;
  background: white;
  border-radius: 30px;
  box-shadow: var(--card-shadow);
}

input[type="file"] {
  width: 97%;
  padding: 1rem;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

input[type="file"]:hover {
  border-color: var(--primary-color);
  background-color: #f8fbff;
}

.image-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.image-box {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  transition: transform 0.3s ease;
}

.image-box:hover {
  transform: translateY(-5px);
}

.image-box h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 0.5rem;
}

img {
  width: 100%;
  height: 300px;
  object-fit: contain;
  border-radius: 8px;
  background: #f8f9fa;
}

.operations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

button:active {
  transform: scale(0.98);
}

button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

button:nth-child(1) {
  background-color: var(--primary-color);
  color: white;
}

button:nth-child(1):hover {
  background-color: #357abd;
}

button:nth-child(2) {
  background-color: var(--secondary-color);
  color: white;
}

button:nth-child(2):hover {
  background-color: #5a6268;
}

button:nth-child(n+3) {
  background-color: #17a2b8;
  color: white;
}

button:nth-child(n+3):hover {
  background-color: #138496;
}

button:nth-child(n+7) {
  background-color: #d1bf1b;
  color: white;
}

button:nth-child(n+7):hover {
  background-color: #c4c71c;
}

button:nth-child(n+9) {
  background-color: #c42525;
  color: white;
}

button:nth-child(n+9):hover {
  background-color: #ce2424;
}

button:last-child {
  background-color: var(--success-color);
  color: white;
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
}

button:last-child:hover {
  background-color: #218838;
}

@media (max-width: 768px) {
  .container {
    margin: 1rem;
    padding: 1rem;
  }
  
  .image-container {
    grid-template-columns: 1fr;
  }
}
</style>
